<template>
	<div class="oneMain">
		<div class="tools">
			<div>
				<el-form :inline="true" :model="search" size="small">
					<!-- <el-form-item>
						<el-input placeholder="输入用户组名称" v-model="search.content" class="input-with-select" @keyup.enter.native="refreshTable()">
							<el-button slot="append" icon="el-icon-search" v-on:click="refreshTable()"></el-button>
						</el-input>
					</el-form-item> -->
					<el-form-item>
						<el-button class="addBtn" size="small" @click="addOne" v-if="rootlist.add">添加</el-button>
						<!-- <el-button
              class="delBtn"
              size="small"
              @click="delectSome"
              v-if="firstType == 'selection' && rootlist.delete"
            >删除
            </el-button>
            <el-button
              class="editBtn"
              size="small"
              @click="changeEdit"
              v-if="rootlist.add || rootlist.update || rootlist.delete"
            >{{ toolsTitle }}
            </el-button> -->
					</el-form-item>
				</el-form>
			</div>
			<div>
				<el-button icon="el-icon-refresh" size="small" class="btn refBtn btnRight" @click="refreshTable"></el-button>
			</div>
		</div>
		<div class="tableContent">
			<el-table ref="table" height="679" :data="tableData" tooltip-effect="light" size="small" v-loading="loading" class="table"
			 @selection-change="changeSelect">
				<el-table-column type="index" label="序号" width="70" :resizable="false" key="indexOOO" v-if="firstType == 'index'"></el-table-column>
				<el-table-column type="selection" label="序号" width="70" :resizable="false" key="select000" v-if="firstType == 'selection'">
				</el-table-column>
				<el-table-column prop="name" label="名称" min-width="150" key="name"></el-table-column>
				<el-table-column prop="allcount" label="端口总数" min-width="150" key="hosts"></el-table-column>
				<el-table-column prop="tcpcount" label="TCP端口数" min-width="150"></el-table-column>
				<el-table-column prop="udpcount" label="UDP端口数" min-width="150"></el-table-column>
				<el-table-column label="操作" key="editUpdate" min-width="100">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="默认端口,无法删除" placement="right" :disabled="scope.row.inUse == 1 ? false : true"
						 v-if="scope.row.default==1 ? true : false">
							<div class="btnn">
								<el-button class="udpBtn" type="error" size="mini" @click="deleteportlist(scope.row)" :disabled="scope.row.inUse == 1 ? true : false">删除</el-button>
							</div>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="正在使用,无法删除" placement="right" :disabled="scope.row.inUse == 1 ? false : true"
						 v-if="scope.row.default==1 ? false : true">
							<div class="btnn">
								<el-button class="udpBtn" type="error" size="mini" @click="deleteportlist(scope.row)" :disabled="scope.row.inUse == 1 ? true : false">删除</el-button>
							</div>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<el-row class="page">
				<el-pagination @current-change="changePage" :current-page.sync="currentPage" :page-size.sync="pageSize" layout="prev, pager, next,jumper,->,total"
				 :total="total"></el-pagination>
			</el-row>
		</div>
		<el-dialog :visible.sync="editVisible" :close-on-click-modal="false" width="450px">
			<div slot="title">
				{{ editTitle + '端口' }}
			</div>
			<el-form ref="form" :model="form" :rules="formRule" label-width="110px" v-loading="e_loading" size="mini" class="form"
			 label-position="left" @submit.native.prevent>
				<el-form-item label="名称" prop="name">
					<el-input class="short-input" v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="端口范围" prop="range">
					<el-input class="short-input" v-model="form.range"></el-input>
				</el-form-item>
			</el-form>
			<div class="dialog-footer" slot="footer">
				<el-button type="primary" size="small" :disabled="submitDis" class="sureBtn" @click="submitEdit('form')">确定</el-button>
				<el-button @click="editVisible = false" class="cancelBtn" size="small">取消</el-button>
			</div>
		</el-dialog>
		<add-portlist ref="portlist"></add-portlist>
	</div>
</template>

<script>
	import tablePublic from '@/mixins/tablePublic'
	import systemEdit from '@/mixins/systemEdit'
	import addPortlist from '@c/list/portlist'
	export default {
		components: {
			addPortlist,
		},
		name: 'scanlist',
		mixins: [tablePublic, systemEdit],
		data() {
			return {
				deleteOneUrl: 'deletePortList',
				deleteUrl: 'deletePortList',
				editVisible: false,
				e_loading: false,
				search: {},
				// tableMethods: ,
				tableUrl: 'getPortList',
				addUrl: 'createTaskByIp',
				form: {
					name: '',
					range: '',
				},
				options: [],
				rootlist: {
					add: true,
					update: true,
					delete: true,
				},
				formRule: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur',
					}, ],
					range: [{
						required: true,
						message: '请输入端口范围',
						trigger: 'blur',
					}, ],
				},
				customColors: [{
						color: '#e6a23c',
						percentage: 40,
					},
					{
						color: '#1989fa',
						percentage: 80,
					},
					{
						color: '#5cb87a',
						percentage: 100,
					},
				],
			}
		},
		created() {
			// this.getPortList()
		},
		methods: {
			addportlist() {
				this.$refs.portlist.showportlist()
				this.$refs.portlist.editTitle = '添加端口列表'
				setTimeout(() => {
					this.$refs.portlist.$refs.form.clearValidate()
					this.$refs.portlist.$refs.form.resetFields()
				}, 50)
			},
			deleteportlist(row) {
				let _this = this
				_this.loading = true
				_this
					.$confirm('确认删除？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					})
					.then(() => {
						_this.deleteone(row)
					})
					.catch(() => {
						_this.$message({
							type: 'info',
							message: '已取消删除',
						})
						_this.loading = false
					})
			},
			async deleteone(row) {
				let _this = this
				let ids = []
				ids.push(row.portId)
				// console.log(ids);
				let res = await _this.$api.deleteRequest(ids, 'deletePortList')
				if (res.code) {
					_this.loading = false
					_this.$message({
						message: '删除失败',
						type: 'warning',
					})
				} else {
					_this.loading = false
					_this.$message({
						message: '删除成功',
						type: 'success',
					})
					_this.getTableData()
				}
			},
			submitEdit(formName) {
				this.e_loading = true
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.createPortList()
						// this.editVisible = false
					} else {
						return false
					}
				})
			},
			async createPortList() {
				let _this = this
				let param = {
					name: _this.form.name,
					port_range: _this.form.range,
				}
				let res = await _this.$api.postRequest(param, 'createPortList')
				if (res.code == 500) {
					_this.$message({
						message: res.data.message,
						type: 'warning',
					})
					_this.e_loading = false
				} else {
					_this.getTableData()
					_this.e_loading = false
					_this.$message({
						showClose: true,
						message: '新建端口成功',
						type: 'success',
					})
					_this.editVisible = false
				}
			},
			async createTarget() {
				let _this = this
				// _this.editVisible = false
				let param = {
					name: _this.form.name,
					portId: _this.form.port,
					hosts: _this.form.ip,
				}
				let res = await _this.$api.postRequest(param, 'createTarget')
				if (res.code == 500) {
					_this.$message({
						message: res.data.message,
						type: 'warning',
					})
					this.e_loading = false
				} else {
					_this.getTableData()
					this.e_loading = false
					this.$message({
						showClose: true,
						message: '新建扫描目标成功',
						type: 'success',
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	$background: #fff;
	.add {
		padding: 4px 4px;
		font-size: 13px;
		border-radius: 3px;
		margin-left: 2%;
	}

	.tools {
		position: relative;
	}

	.el-button--text {
		padding: 7px 5px;
	}

	.el-button.is-disabled,
	.el-button.is-disabled:hover {
		border: none !important;
	}

	
	.el-tooltip__popper.is-dark {
		background-image: linear-gradient(#65dcfa, #8adef3);
		color: #fff;
		border: 1px solid #00c6f8f8;
	}

	.el-tooltip__popper {
		padding: 6px;
	}

	.btnn {
		width: 54px !important;
	}

	.el-tooltip__popper[x-placement^="right"] .popper__arrow::after {
		border-right-color: #65dcfa !important;
	}

	.el-tooltip__popper[x-placement^="right"] .popper__arrow {
		border-right-color: #00ccff !important;
	}
</style>
